<!--
*- coding = utf-8 -*-
#@Time : 2023/6/25 14:01
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
    <!--    #ifdef MP-WEIXIN-->
    <view class="u-f u-f-ajs top-style">
        <view class="u-f u-f-ac u-f-ajc left-style">
            <slot name="leftIcon"></slot>
        </view>
        <view class="u-f u-f-ac u-f-ajc title-style" style="font-size:16px;color:#000000;">{{ props.title }}</view>
        <view class="u-f u-f-ac u-f-ajc right-style">
            <slot name="rightIcon"></slot>
        </view>
    </view>
    <!--    #endif-->
    <!--    #ifdef H5 || APP-PLUS-->
    <view class="u-f u-f-ajs top-style" v-bind="attrs">
        <view class="u-f u-f-ac u-f-ajc left-style">
            <slot name="leftIcon"></slot>
        </view>
        <view class="u-f u-f-ac u-f-ajc title-style" style="font-size:16px;color:#000000;">{{ props.title }}</view>
        <view class="u-f u-f-ac u-f-ajc right-style">
            <slot name="rightIcon"></slot>
        </view>
    </view>
    <!--    #endif-->

</template>

<script setup lang="ts">
import {useAttrs} from "vue";

interface propsInterface{
  title?:string,
  topOpacity?:number,
}
let props = withDefaults(defineProps<propsInterface>(),{
  title:"",
  topOpacity:1,
})
let attrs = useAttrs()
</script>

<style scoped lang="less">
.top-style{
  transition:opacity 0.5s;
  opacity: v-bind("topOpacity");
  z-index:999;
  position:fixed;
  top:0px;
  left:0px;
  color:@--foreground-color-light-one;
  width: 100%;
  background:@--top-nav-light-one;
  /*#ifdef APP-PLUS*/
  line-height:35px;
  padding:100rpx 20rpx 10rpx 20rpx;
  /*#endif*/
  /*#ifdef  H5 */
  line-height:20px;
  padding:12px 0px;
  /*#endif*/
}
.title-style{
    color:@--top-nav-light-color-one!important;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
    .left-style{
        margin-left:15px;
        min-width:30px;
    }
    .right-style{
        margin-right:15px;
        min-width:30px;
    }
</style>
